<template>
    <div id="container">
      <div id="viewDiv"></div> 
      <div id="editor" style="position:absolute;top:0px;left:0px;height:100%;width:330px;"></div>
    </div>
  </template>
     
  <script setup>
  import {onMounted} from 'vue'
  import * as 天地图 from '../天地图'
  import Map from '@arcgis/core/Map'
  import MapView from '@arcgis/core/views/MapView'
  import FeatureLayer from '@arcgis/core/layers/FeatureLayer'
  import Editor from '@arcgis/core/widgets/Editor'
  var 面要素图层,map,view,editor
  onMounted(()=>{
        面要素图层=new FeatureLayer({
            title:"青岛市AOI图层",
            url:"https://ws8575.club/web/rest/services/Hosted/地图发布测试_要素图层_查询上限2W_3857/FeatureServer/0",
            renderer:{
                type:"simple",
                symbol:{
                    type:"simple-fill",
                    color:[200,50,50,0.5],
                    outline:{
                        width:0
                    }
                }
            }
        })
        map = new Map({//创建地图对象
          basemap:{
            baseLayers:天地图.天地图矢量
          },//底图为卫星影像图
          layers:[面要素图层]
        })
        view = new MapView({//创建视图对象
            container: "viewDiv",  map: map,  center: [120.16667, 36.2],
            zoom: 12
        })
        view.ui.remove(["zoom","attribution"]);
        editor=new Editor({
            view:view,
            container:"editor",
            tooltipOptions:{
                enabled:true,
            },
        })
  })
  </script>
  
  <style scoped>
  #container,#viewDiv{
    width:100%; height:100%; padding:0;margin:0;
  }
  </style>
  